import React, { useState, useEffect } from 'react';
import { Form, DatePicker, Modal, message, Icon } from 'antd';
import moment from 'moment';

import { isSuccess } from '@/utils/request';
import { salaryRecheck } from '@/services/salaryManage/salaryCalculate';

import rejectStyles from '@/pages/SalaryManage/SalaryCalculate/Recheck/components/CheckHandle/index.less';

const RejectModal = props => {
    const { form, visible, dispatch, dispatchType, period, organizationCode } = props;
    const { getFieldDecorator } = form;

    const [initialTime, setInitialTime] = useState(moment());

    useEffect(() => {
        if (!period || !visible) {
            return;
        }
        const year = period.substr(0, 4);
        const month = period.substr(5);
        salaryRecheck
            .queryIndependentInformation({
                year,
                month,
                organizationCode
            })
            .then(res => {
                if (isSuccess(res) && res.data.lastSalaryPushTime) {
                    setInitialTime(moment(res.data.lastSalaryPushTime));
                }
            });
    }, [period, visible]);

    //  弹窗=》确定按钮是否加载状态
    const [confirmLoad, setConfirmLoad] = useState(false);

    const onRejectOk = () => {
        form.validateFields((errors, value) => {
            if (errors) {
                message.error('请选择日期');
                return;
            }
            const { pushTime } = value;
            setConfirmLoad(true);
            const postValue = {
                pushTime: moment(pushTime).format('YYYY-MM-DD HH:mm')
            };
            dispatch({
                type: dispatchType.sendSalaryPayrollType,
                payload: postValue,
                callback: response => {
                    if (isSuccess(response)) {
                        message.success('提交成功');
                    } else {
                        message.error(response.msg);
                    }
                    setConfirmLoad(false);
                }
            });
        });
    };

    const onRejectClose = () => {
        dispatch({
            type: dispatchType.sendSalaryPayrollInit,
            payload: false
        });
    };

    // 限制时间
    const disabledDateTime = value => {
        if (!value) {
            return false;
        }
        return (
            value <
                moment() ||
            value >
                moment()
                    .startOf('day')
                    .add(3, 'd')
        );
    };

    const title = '下发薪资单确认';

    return (
        <Modal
            title={title}
            visible={visible}
            onOk={onRejectOk}
            onCancel={onRejectClose}
            destroyOnClose
            centered
            confirmLoading={confirmLoad}
        >
            <div className={rejectStyles.msg}>
                <Icon type="exclamation-circle" theme="filled" />
                将于该日期下发薪资单
            </div>
            <Form layout="inline" className={rejectStyles.recheckForm}>
                <Form.Item label="下发日期">
                    {getFieldDecorator('pushTime', {
                        initialValue: initialTime,
                        rules: [
                            {
                                required: true,
                                message: '请选择日期'
                            }
                        ]
                    })(<DatePicker showTime format="YYYY-MM-DD HH:mm" disabledDate={disabledDateTime} />)}
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default Form.create()(RejectModal);
